<script setup>
import bread from '@/components/bread/bread.vue'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticleVosPage } from "../../service/applyaudit/applyaudit";

const router = useRouter();
const route = useRoute();
const breadcround = ref([
  { name: '首页', url: '/main/home' },
  { name: '通知公告', url: '/main/announcement?articleType=' + route.query.articleType }
])
const announcementList = ref([])
let current = ref(1)
let size = ref(10)
let total = ref(1)
function handleSizeChange(val) {
  console.log(val);
}
function handleCurrentChange(val) {
  current.value = val
  getArticleList();
}
const newItemClick = (articleId) => {
  router.push({ path: '/main/newItem', query: { articleId: articleId } })
}
function getArticleList() {
  getArticleVosPage({ articleType: route.query.articleType, current: current.value, size: size.value }).then((resp) => {
    console.log(resp);
    if (resp.data.code === 0) {
      announcementList.value = resp.data.result.records;
      total.value = resp.data.result.total
    } else {

    }
  });
}
onMounted(() => {
  getArticleList();
})
</script>

<template>
  <div>
    <div class="announcementImg">
      <img src="@/assets/img/announcementImg.png" alt="">
    </div>
    <div class="box">
      <bread class="bread" :breadcround="breadcround" />
      <div class="announcementList">
        <template v-for="(item, index) in announcementList" :key="item.articleId">
          <div class="ListItem" @click="newItemClick(item.articleId)">
            <div class="time">
              <div class="month">
                {{ item.titleTime.split('-')[1] }}
              </div>
              <div class="year">
                {{ item.titleTime.split('-')[0] }}
              </div>
            </div>
            <div class="msg">
              <div class="title">{{ item.articleTitle }}</div>
              <div class="context">{{ item.outline }}</div>
            </div>

          </div>
        </template>
        <pagination :currentPage1="current" :pageSize="size" :total="total" @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange" />
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped>
.announcementImg {
  height: 280px;

  img {
    width: 100%;
    height: 100%;
  }
}

.box {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin: 25px 0;
  }

  .announcementList {


    .ListItem {
      background: #FFFFFF;
      border: 1px solid #E8E9EB;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 30px;
      cursor: pointer;

      .time {
        width: 96px;
        height: 96px;
        text-align: center;
        background: #DCDEE0;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .month {
          width: 96px;
          font-size: 28px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 24px;
        }

        .year {
          width: 96px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
        }
      }

      .msg {
        margin-left: 30px;

        .title {

          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        .context {
          margin-top: 20px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
          line-height: 30px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //超出使用省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; //第几行
          -webkit-box-orient: vertical;
        }
      }
    }

    .ListItem:hover {
      box-shadow: 0 0 10px 1px rgba(24, 145, 255, 0.56);

      .time {
        background: #1891FF;
      }
    }
  }
}
</style>
